<template>
	<view class="container">
		<view style="flex: 1;">
			<view class="img" style="">
				<image class="pic" src="../../static/imgs/auth.png" mode=""></image>
				<view class="des">中检奢侈品部门实名认证系统</view>
			</view>
			<view class="main">
				<view style="padding: 30rpx 34rpx 0;">
					<view class="step">
						<view class="title">
							<view>第1步</view>
							<view class="" style="padding-left: 24rpx;">
								手机号查询
							</view>
						</view>
						<view class="num">
							1/3
						</view>
					</view>
				</view>
				<view class="phone">
					<view class="des">
						输入手机号：
					</view>
					<view class="tips" v-if="isInvite">
						<image src="../../static/imgs/success.png" mode="widthFix"></image>
						<view class="">
							邀请链接进入，请直接点击下一步
						</view>
					</view>
					<view class="tips" v-if="isFail">
						<image src="../../static/imgs/error.png" mode="widthFix"></image>
						<view class="" style="font-weight: 500;color: #F5222D;font-size: 32rpx;">
							查无此电话号码
						</view>
					</view>
					<u-input :disabled="isInvite" placeholder="输入手机号" type="number" v-model="phone"></u-input>
					<view class="submit" @click="search" v-if="isFail" style="margin-top: 80rpx;">
						重置
					</view>
					<view class="submit" @click="search" v-else>
						{{isInvite?'下一步':'查询' }}
					</view>
				</view>
				<view class="note">
					<view>说明：</view>
					<view class="">
						我司现已支持个人送检，若订单中预留的手机号系统检测为首次送检，需进行实名认证后才能送检检验。
					</view>

				</view>
			</view>
		</view>
		<view class="copyright">
			Copyright © 2024-2025 中检集团 版权所有
		</view>
	</view>
</template>

<script>
	import {
		search_phone_api
	} from '@/common/api.js'
	import {
		Base64
	} from "@/js_sdk/js-base64/base64.js"
	export default {
		data() {
			return {
				isFail: false,
				title: 'Hello',
				isInvite: false,
				phone: '',
			}
		},
		onLoad({
			data
		}) {
			if (data) {
				this.isInvite = true
				this.phone = Base64.decode(data)
			}
		},
		methods: {
			search() {

				if (this.isFail) {
					this.isFail = false
					this.phone = ''
					return
				}
				if (!this.phone) return this.$u.toast('请输入')
				// if (!uni.$u.test.mobile(this.phone)) return this.$u.toast('请输入正确的手机号')
				uni.showLoading({
					mask: true,
					title: '查询中'
				})
				search_phone_api({
					params: {
						phone: this.phone,
					},
					custom: {
						catch: true,
						toast: false
					}
				}).then(res => {
					console.log(res);
					if (res.data.verifyed_status != 0) {
						uni.navigateTo({
							url: `/pages/index/result?phone=${Base64.encode(this.phone)}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/index/second?phone=${Base64.encode(this.phone)}`
						})
					}
				}).catch(e => {
					console.log(e);
					if (e.code == 0) {
						this.isFail = true
					}
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;

		.img {
			padding-top: 150rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			flex-direction: column;

			.pic {
				width: 314rpx;
				height: 234rpx;
			}

			.des {
				margin-top: 16rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #fff;
			}
		}

		.main {

			background-color: #fff;
			margin: 0 24rpx;
			margin-top: 82rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding-bottom: 30rpx;

			.step {
				border-bottom: 2rpx solid #E7E7E7;
				display: flex;
				justify-content: space-between;
				padding-bottom: 26rpx;

				.title {
					display: flex;
					font-size: 36rpx;
					font-weight: 500;
					color: #303133;
					line-height: 56rpx;
				}

				.num {
					font-size: 32rpx;
					font-weight: 500;
					color: #303133;
					line-height: 56rpx;
				}
			}

			.phone {

				margin: 50rpx 34rpx 0;

				.des {
					font-size: 28rpx;
					color: #606266;
					margin-bottom: 24rpx;
				}

				.tips {
					display: flex;
					align-items: center;
					padding: 14rpx 0;

					>image {
						width: 64rpx;
						height: 64rpx;
					}

					>view {
						padding-left: 10rpx;
						color: #16C4AF;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
					}
				}

				.submit {
					width: 196rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #43B0E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					margin: 0 auto;
					margin-top: 164rpx;
					margin-bottom: 74rpx;
				}
			}

			.note {
				margin: 0 34rpx;
				font-size: 28rpx;
				color: #909399;
				line-height: 50rpx;
			}
		}

		.copyright {
			margin-top: 154rpx;
			padding-bottom: 34rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>